<template>
  <div class="goods_item" :style="{'--themeColor': themeColor}">
    <el-image :src="data.cover" class="cover"/>
    <div class="info">
      <div class="desc">{{ data.desc }}</div>
      <div class="price">
        <span class="price-now">￥{{ data.price }}</span>
        <span class="price-old">￥{{ data.oldPrice }}</span>
        <span class="address">{{data.address}}</span>
      </div>
      <div class="tags">
        <span v-for="(item, index) in data.tags" :key="index">{{ item }}</span>
      </div>
      <div class="shop">
        <el-image :src="data.shop.icon" v-if="data.shop.icon" class="shop-icon"/>
        <span class="shop-name">{{data.shop.name}}</span>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {defineProps, withDefaults} from 'vue'

/**
 * @description 商品组件(最好配合 "grid-container" 瀑布流布局组件使用)
 * @param data 商品数据
 * @example
 * <GridContainer :columnCount="4" :columnGap="10" :rowGap="10">
 *   <goods-item v-for="item in goods" :key="item.id" :data="item"/>
 * </GridContainer>
 */
interface Goods {
  id: string
  name: string
  price: number;
  oldPrice?: number;
  cover: string;
  stock: number
  sales: number
  desc: number
  shop: {
    name: string;
    icon?: string
  }
  tags?: string[],
  address?: string
}

interface Props {
  data: Goods;
  themeColor?: string; // 可选属性
}

// 使用 withDefaults 定义默认值
const props = withDefaults(defineProps<Props>(), {
  themeColor: '#ff5000'
});
</script>
<style scoped lang="scss">
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.goods_item {
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, .3);
  padding: 2px 2px 10px 2px;
  overflow: hidden;
  color: #333;
  cursor: pointer;
  .cover {
    border-radius: 20px;
    height: fit-content;
  }

  .info {
    padding: 2px 4px;

    .desc {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 8px;
    }

    .price {
      display: flex;
      align-items: flex-end;
      margin: 20px 0;
      .price-now {
        font-size: 16px;
        font-weight: bold;
        color: var(--themeColor);
      }

      .price-old {
        font-size: 12px;
        margin-left: 8px;
        text-decoration: line-through;
      }
      .address{
        margin-left: 10px;
        font-size: 14px;
        color: #909399;
      }
    }
    .tags {
      display: flex;
      align-items: center;
      width: 100%;
      overflow: hidden;

      span {
        color: var(--themeColor);
        font-size: 14px;
        margin-left: 4px;
      }
    }
    .shop{
      margin-top: 14px;
      font-size: 14px;
      color: #606266;
      display: flex;
      align-items: center;
      width: 100%;
      overflow: hidden;
      .shop-icon{
        width: 20px;
        height: 20px;
        border-radius: 50%;
        margin-right: 10px;
      }
    }
  }

  &:hover {
    border: 1px solid var(--themeColor);
  }
}
</style>